import React, {Component, useState} from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Message from "./Message";
import {
    Text,
    View,
    StyleSheet,
    SafeAreaView,
    TextInput,
    Button,
    Dimensions,
    StatusBar,
    TouchableOpacity, Image,
    ImageBackground,
    ActivityIndicator, FlatList,
} from 'react-native';



export default class Contactperson extends Component {
    constructor(props) {
        super(props);
        this.state = {
            contact:[
                {
                    name: "李孝",
                    username: "Lyxio",
                    photo: "https",
                    MessageTime: "2023-10-07",
                    message:"你今天还好吗？",
                },
                {
                    name: "郑四",
                    username: "Nuiew",
                    photo: "https",
                    createTime: "2023-10-07",
                    message:"你吃啥？",
                },
                {
                    name: "王五",
                    username: "Huijh",
                    photo: "https",
                    MessageTime: "2023-10-07",
                    message:"我并不清楚？",

                },
                {
                    name: "宋六",
                    username: "Guijv",
                    photo: "https",
                    MessageTime: "2023-10-07",
                    message:"不明白你在干啥？",
                },
                {
                    name: "李孝",
                    username: "Lyxio",
                    photo: "https",
                    MessageTime: "2023-10-07",
                    message:"你今天还好吗？",
                },
                {
                    name: "郑四",
                    username: "Nuiew",
                    photo: "https",
                    createTime: "2023-10-07",
                    message:"你吃啥？",
                },
                {
                    name: "王五",
                    username: "Huijh",
                    photo: "https",
                    MessageTime: "2023-10-07",
                    message:"我并不清楚？",

                },
                {
                    name: "宋六",
                    username: "Guijv",
                    photo: "https",
                    MessageTime: "2023-10-07",
                    message:"不明白你在干啥？",
                },
                {
                    name: "李孝",
                    username: "Lyxio",
                    photo: "https",
                    MessageTime: "2023-10-07",
                    message:"你今天还好吗？",
                },
                {
                    name: "郑四",
                    username: "Nuiew",
                    photo: "https",
                    createTime: "2023-10-07",
                    message:"你吃啥？",
                },
                {
                    name: "王五",
                    username: "Huijh",
                    photo: "https",
                    MessageTime: "2023-10-07",
                    message:"我并不清楚？",

                },
                {
                    name: "宋六",
                    username: "Guijv",
                    photo: "https",
                    MessageTime: "2023-10-07",
                    message:"不明白你在干啥？",
                },
                {
                    name: "李孝",
                    username: "Lyxio",
                    photo: "https",
                    MessageTime: "2023-10-07",
                    message:"你今天还好吗？",
                },
                {
                    name: "郑四",
                    username: "Nuiew",
                    photo: "https",
                    createTime: "2023-10-07",
                    message:"你吃啥？",
                },
                {
                    name: "王五",
                    username: "Huijh",
                    photo: "https",
                    MessageTime: "2023-10-07",
                    message:"我并不清楚？",

                },
                {
                    name: "宋六",
                    username: "Guijv",
                    photo: "https",
                    MessageTime: "2023-10-07",
                    message:"不明白你在干啥？",
                },  {
                    name: "李孝",
                    username: "Lyxio",
                    photo: "https",
                    MessageTime: "2023-10-07",
                    message:"你今天还好吗？",
                },
                {
                    name: "郑四",
                    username: "Nuiew",
                    photo: "https",
                    createTime: "2023-10-07",
                    message:"你吃啥？",
                },
                {
                    name: "王五",
                    username: "Huijh",
                    photo: "https",
                    MessageTime: "2023-10-07",
                    message:"我并不清楚？",

                },
                {
                    name: "宋六",
                    username: "Guijv",
                    photo: "https",
                    MessageTime: "2023-10-07",
                    message:"不明白你在干啥？",
                }
            ]
        }
    }

    async componentDidMount() {


    }


    render() {
        return (
            <View>
                <StatusBar translucent backgroundColor="transparent" barStyle={"dark-content"} />
                <SafeAreaView style={styls.safearea}>
                    <View style={styls.topbarview}>
                        <TouchableOpacity style={styls.topbarview_button1} onPress={this.loginbutton} >
                            <Image source={require("../home/touxiang.jpg")} style={styls.topbarview_image1}>

                            </Image>
                        </TouchableOpacity>
                        <View style={styls.topbarview_view}>

                        </View>

                        <TouchableOpacity style={styls.topbarview_button2} onPress={this.loginbutton} >
                            <Image source={require("../contactperson/img.png")} style={styls.topbarview_image2}>

                            </Image>
                        </TouchableOpacity>
                    </View>

                        <TextInput style={styls.seachviewinput} >
                        </TextInput>
                    <View style={styls.messageview}>
                        <FlatList style={styls.flatList}
                            data={this.state.contact}
                            keyExtractor={item => item.username}
                            renderItem={({ item }) => (
                                <Message
                                    name={item.name}
                                    photo={item.photo}
                                    message={item.message}
                                    messageTime={item.MessageTime} ></Message>
                            )}
                        />
                    </View>
                    <View style={{flexDirection:"row",margin:0,borderColor:"#000000",borderWidth:1,backgroundColor:""}}>

                    </View>

                </SafeAreaView>
            </View>

        )
    }
            }

const styls=StyleSheet.create({

    safearea:{
        flex:1,
        marginTop:Dimensions.get("window").height/20,
        marginLeft:Dimensions.get("window").width*1/25,
        marginRight:Dimensions.get("window").width*1/25,
    },
    topbarview:{
        height:Dimensions.get("window").height/14,
        flexDirection:"row",
    },
    topbarview_view:{
        margin:0,
        width:Dimensions.get("window").width/2,

    },
    topbarview_image1: {
        borderRadius:100,
        resizeMode:"stretch",
        margin:0,
        width:Dimensions.get("window").width/7,
        height:Dimensions.get("window").height/15,
    },
    topbarview_image2: {
        borderRadius:100,
        resizeMode:"stretch",
        margin:0,
        width:Dimensions.get("window").width/16,
        height:Dimensions.get("window").height/30,
        alignSelf:"center",
    },
    topbarview_button1:{
        margin:0,
        width:Dimensions.get("window").width/7,

    },
    topbarview_button2:{
        marginLeft:Dimensions.get("window").width*17/100,
        width:Dimensions.get("window").width/7,

        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',


    },
    searchview:{


    },
    seachviewinput:{
        height:Dimensions.get("window").height/20,
        alignSelf:"center",
        alignContent:"center",
        textAlign:"center",
        textAlignVertical:"center",
        backgroundColor:"#cccccc",
        width:Dimensions.get("window").width*23/25,
        marginTop:Dimensions.get("window").height/100,
        borderRadius:30,
        marginLeft:Dimensions.get("window").width*1/25,
        marginRight:Dimensions.get("window").width*1/25,
    },
    messageview:{

        marginBottom:Dimensions.get("window").height/12,
        marginTop:10,
        height:Dimensions.get("window").height*80/100,
    },
    flatList:{

    },

})